<template>
  <div>
      <div class="table-title" >火情预警</div>
      <div class="camera-alarm-table">
        <div class="filter-bar">
          <a-button
            type="primary"
            size="small"
            @click="refreshData"
            style="margin-left: 95%;color: #fff;"
          >
            <template #icon>
              <ReloadOutlined />
            </template>
            刷新
          </a-button>
        </div>
        <a-table
          :columns="columns"
          :data-source="alarmList"
          :pagination="pagination"
          bordered
          :scroll="{ y: 200 }"
          row-key="id"
          :rowClassName="getRowClassName"
        >
          <template #enterpriseName="{ record }">
            <a 
              @click="handleEquipmentNameClick(record)" 
              style="color:#fff;cursor: pointer; "
            >
              {{ record.enterpriseName }}
            </a>
          </template>
        </a-table>
      </div>
   </div>
</template>

<script setup name="FireAlarmTable">
import { ref, computed, onMounted,defineProps,watch } from 'vue';
import { Table, Button } from 'ant-design-vue';
import { ReloadOutlined } from '@ant-design/icons-vue';
import { router } from '/@/router'; // 引入路由钩子
import { getEquipmentWarningDetails } from '/@/api/jgBigscreen/jgBigscreen';
import ViewsManagementInFireInfoList from '/@/views/management/inFireInfo/list.vue'

// const router = useRouter(); // 获取路由实例
const props = defineProps({
  fireAlarmType: {
    type: String,
    default: '全部'
  }
});

// 状态管理
const timeFilter = ref('default');
const dateRange = ref([]);
const alarmList = ref([]);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  onChange: (page, pageSize) => {
    pagination.value.current = page;
    pagination.value.pageSize = pageSize;
    fetchData();
  }
});


// 表格列配置
const columns = computed(() => [
  {
    title: '企业名称',
    dataIndex: 'enterpriseName',
    key: 'enterpriseName',
    width: 120,
    slots:{ customRender: 'enterpriseName' }
  },
  {
    title: '建筑名称',
    dataIndex: 'buildName',
    key: 'buildName',
    width: 100
  },
  {
    title: '设备名称',
    dataIndex: 'equipmentName',
    key: 'equipmentName',
    width: 140
  },
  {
    title: '告警时间',
    dataIndex: 'alarmTime',
    key: 'alarmTime',
    width: 140
  },
  {
    title: '告警信息',
    dataIndex:'alarmInfo',
    key:'alarmInfo',
    width: 120
  },
  {
    title: '反馈',
    dataIndex:'feedback',
    key:'feedback',
    width: 120
  },
  {
    title: '状态',
    dataIndex:'state',
    key:'state',
    width: 120
  }
]);

// 获取行样式
const getRowClassName = (record, index) => {
  return index % 2 === 0? 'row-even' : 'row-odd';
};

// 刷新数据
const refreshData = () => {
  console.log('刷新数据:', timeFilter.value, dateRange.value);
  fetchData();
};

// 获取数据
const fetchData = async () => {
  try {
    const response = await getEquipmentWarningDetails({
      type: props.fireAlarmType,
      pageNo: pagination.value.current,
      pageSize: pagination.value.pageSize
    });
    alarmList.value = response.list;
    pagination.value.total = response.count;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 初始化加载数据
onMounted(() => {
  fetchData();
});

// 监听 deviceType 的变化
watch(() => props.fireAlarmType, (newValue, oldValue) => {
  if (newValue!== oldValue) {
    console.log('fireAlarmType 发生变化，重新请求数据');
    fetchData();
  }
});

// 点击设备名称事件处理
const handleEquipmentNameClick = (record) => {
  console.log('点击设备名称，tid:', record.tid);
  
  router.push({ 
    path: '/management/inFireInfo/list', 
    name: 'ViewsManagementInFireInfoList',
    query: { tid: record.tid } 
  }).then(() => {
    console.log('路由跳转成功');
  }).catch((error) => {
    console.error('路由跳转失败:', error);
  });
}
</script>

<style scoped>
::v-deep(.table-title){
  margin-bottom: -7px;
  font-size: 30px;
  font-weight: bold;
  width: 28%;
  color: #CAFFFE;
  position: relative;
  padding: 0;
  padding-left: 3%;
  background-image:url('/@/views/Echarts/jgBigscreen/assets/img/弹窗表头背景.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  z-index: 20;
}
::v-deep(.ant-table-wrapper .ant-table-pagination-right){
  display:flex;
  justify-content:center;
  ::v-deep(.ant-pagination-item){
    background-color: rgb(0, 81, 81);
    color: #fff;
  }
  ::v-deep(.ant-pagination-prev, .ant-pagination-next){
    background-color:  rgb(0, 81, 81);
  }
  ::v-deep(.ant-select-selector){
    background-color: rgb(0, 81, 81);
    color: #fff;
  }
  ::v-deep(.ant-pagination-item a){
    color: #fff;
  }
  ::v-deep(.anticon svg){
    color: #fff;
  }
  ::v-deep(.ant-pagination-item-ellipsis){
    color: #fff;
  }
}
.camera-alarm-table {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  /* background-color:rgb(0,37,39); */
  background-image:url('/@/views/Echarts/jgBigscreen/assets/img/弹窗表格背景图.png');
  background-repeat:no-repeat;
  background-size:100% 100%;

  ::v-deep(.ant-table-container){
    background-color:rgb(0,37,39);
    /* background-image:url('/@/views/Echarts/jgBigscreen/assets/img/弹窗表格背景图.png');
    background-repeat:no-repeat;
    background-size:100% 100%; */
    color: #fff;
    ::v-deep(.ant-table-thead .ant-table-cell){
      background: linear-gradient(to bottom, rgb(0, 37, 39), rgb(0, 81, 81));
      color: #fff
    }
     /* 添加行悬停样式 */
     ::v-deep(.ant-table-tbody > tr:hover > td) {
      background: linear-gradient(to bottom, rgb(0, 37, 39), rgb(0, 81, 81)) !important;
    }
  }
  ::v-deep(.ant-btn-primary){
    background-color: #005155;
  }
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  width: 100%;
}

.text-danger {
  color: #ff4d4f;
}

.text-success {
  color: #52c41a;
}

/* 设备名称链接样式 */
::v-deep(.ant-table-cell a) {
  color: #1890ff;
  text-decoration: none;
}

::v-deep(.ant-table-cell a:hover) {
  color: #40a9ff;
  text-decoration: underline;
}
</style>